<template>
  <border
    class="trend-of-park-service"
    :moduleType="borderConfig.moduleType"
    :icon="borderConfig.icon"
    :titleText="borderConfig.titleText"
    :goPageUrl="borderConfig.goPageUrl">
    <div class="module-content" slot="module-content">
      <div class="content-top">
        <message v-for="(item, index) in message"
                 :key="index"
                 :messageImgSrc="item.messageImgSrc"
                 :messageNumber="item.messageNumber"
                 :messageName="item.messageName"></message>
      </div>
      <bar-line ref="barLine"
                :title="barLineConfig.title"
                :axis="barLineConfig.axis"
                :xAxis="barLineConfig.xAxis"
                :yAxis="barLineConfig.yAxis"
                :dataZoom="barLineConfig.dataZoom"
                :grid="barLineConfig.grid"
                :config="barLineConfig.config"
                :tooltipsConfig="barLineConfig.tooltipsConfig"
                :seriesData="barLineConfig.seriesData"></bar-line>
      <div class="legend">
        <div class="legend-li" v-for="(item, index) in barLineConfig.legend" :key="index">
          <i :style="{'background': barLineConfig.tooltipsConfig.tipsColor[index]}"></i>
          <span>{{ item.length > 4 ? item.substring(0, 4) : item }}</span>
        </div>
      </div>
    </div>
  </border>
</template>

<script>
import Border from './../components/Border.vue'
import Message from './../components/Message.vue'
import BarLine from './../components/BarLine.vue'
export default {
  name: 'trendOfParkService',
  components: {
    Border,
    BarLine,
    Message
  },
  data () {
    return {
      borderConfig: {
        moduleType: '1x1',
        icon: '',
        titleText: '园区服务趋势',
        goPageUrl: ''
      },
      barLineConfig: {
        legend: ['订单量', '订单额'],
        title: {
        },
        axis: {
          xAxisDataType: 1, // x轴从当前月份开始
          xAxisNameLength: 4,
          xAxisNameLengthSymbol: ''
        },
        dataZoom: {
          show: false,
          right: 10,
          endValue: 12
        },
        grid: {
          top: 10,
          bottom: 0
        },
        config: {
          barWidth: 20
        },
        xAxis: {
          axisLabel: {
            interval: 'auto'
          },
          data: []
        },
        yAxis: [
          {
            splitLine: {
              show: false
            }
          },
          {
            splitLine: {
              show: false
            }
          }
        ],
        tooltipsConfig: {
          tipsColor: ['#2e92cb', '#b60d81'],
          isNearlyYear: true
        },
        seriesData: []
      },
      message: [
        {
          messageName: '近一年订单量',
          messageNumber: '',
          messageImgSrc: require('./../../assets/images/module/message-small.png')
        },
        {
          messageName: '近一年订单额（元）',
          messageNumber: '',
          messageImgSrc: require('./../../assets/images/module/message-small.png')
        }
      ],
      apiData: {},
      refreshInterval: 0
    }
  },
  computed: {
    organId () {
      return this.$store.state.organId
    },
    isIndex () {
      return this.$store.state.isIndex
    }
  },
  methods: {
    showTips (data) {
      this.$parent.showTips(data)
    },
    // 获取数据
    getData (type, refreshInterval, isRefresh) {
      if (type === 'init') {
        this.parkApi.businessServiceLastYearTrend({ organId: this.organId }).then(res => {
          if (res.data.code === '0') {
            this.apiData = res.data.data
            this.message[0].messageNumber = res.data.data.orderNum
            this.message[1].messageNumber = parseInt(res.data.data.orderFee / 100)
          } else {
            this.apiData = {}
            this.showTips('请求失败，点击确认继续刷新')
            this.message[0].messageNumber = ''
            this.message[1].messageNumber = ''
          }
          if (!isRefresh) {
            this.handleData()
          }
        }, res => {
          this.apiData = {}
          if (!isRefresh) {
            this.handleData()
          }
          this.showTips('请求失败，点击确认继续刷新')
          this.message[0].messageNumber = ''
          this.message[1].messageNumber = ''
        })
        if (refreshInterval) {
          this.refreshInterval = refreshInterval
          this.automaticRedrawing()
        }
      } else {
        this.handleData()
      }
    },
    handleData () {
      let data = this.apiData
      let lineData = []
      let lineData1 = []
      if (JSON.stringify(data) !== '{}') {
        data.orderNumLastYear.forEach((item, index) => {
          lineData.push(item.value)
          lineData1.push(parseInt(data.orderFeeLastYear[index].value / 100))
        })
      }
      this.barLineConfig.seriesData = [
        {
          data: lineData,
          name: '订单量',
          yAxisIndex: 0,
          colorIndex: 0
        },
        {
          data: lineData1,
          name: '订单额',
          yAxisIndex: 1,
          colorIndex: 1
        }
      ]
    },
    resizeChart () {
      this.$refs.barLine.resizeChart()
    },
    // 根据接口返回的时间间隔请求接口
    automaticRedrawing () {
      clearInterval(window.trendOfParkServiceTimer)
      if (this.refreshInterval > 0 && this.isIndex) {
        window.trendOfParkServiceTimer = setInterval(() => {
          this.getData('init', '', true)
        }, this.refreshInterval * 1000)
      }
    }
  },
  mounted () {
  },
  destroyed () {
    clearInterval(window.trendOfParkServiceTimer)
  }
}
</script>
<style lang="scss" scoped>
.trend-of-park-service {
  .module-content {
    width: 100%;
    height: calc(100% - 10px);
    .content-top {
      width: 100%;
      overflow: hidden;
      margin: 10px 0 ;
      padding: 0 30px;
      box-sizing: border-box;
      .message {
        width: 144px;
        float: left;
        &:last-of-type {
          float: right;
        }
      }
    }
    .bar-line {
      width: 100%;
      height: calc(100% - 100px);
    }
    .legend {
      width: 100%;
      height: 20px;
      margin-top: 10px;
      text-align: center;
      .legend-li {
        display: inline-block;
        padding: 3px 15px 3px 5px;
        overflow: hidden;
        text-align: left;
        &:last-of-type {
          margin: 0;
        }
        i {
          display: block;
          float: left;
          width: 12px;
          height: 12px;
          border-radius: 100%;
          vertical-align: top;
          margin: 1px 5px 0 0;
        }
        span {
          font-size: 12px;
          color: #A4B3C7;
          line-height: 14px;
          display: inline-block;
        }
      }
    }
  }
}
@media screen and (min-width: 1890px) {
  .trend-of-park-service {
    .module-content {
      .content-top {
        .message {
          width: 173px;
        }
      }
    }
  }
}
</style>
